<template>
    <el-tabs v-model="activeName" type="border-card" style="height: 90%">
        <el-dialog title="提示" :visible.sync="dialogTableVisible">
            <h2>充值成功</h2>
            <div>
                <span>您的当前余额是：</span>
                <span>{{dqye}}</span>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="queding">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="提示" :visible.sync="dialogTableVisibleFail">
            <p>充值失败</p>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="shibaifanhui">返 回</el-button>
            </div>
        </el-dialog>
        <el-tab-pane label="会员充值" name="first">
            <div style="margin: 10px 0">
                <span>输入会员id/手机号:</span>
                <el-input v-model="MemberId" placeholder="请输入内容" clearable></el-input>
                <el-button type="primary" icon="el-icon-search" @click="chaxun"></el-button>
            </div>
            <div class="content">
                <h1>会员基础信息</h1>
                <div v-show="active">
                    <div class="left">
                        <div class="text_left">会员用户名：</div>
                        <div class="text_left">会员ID：</div>
                        <div class="text_left">会员手机号：</div>
                        <div class="text_left">账户余额：</div>
                        <div class="text_left">会员优惠：</div>
                    </div>
                    <div class="left">
                        <div>{{memberName}}</div>
                        <div>{{memberId}}</div>
                        <div>{{memberPhone}}</div>
                        <div>{{yue}}</div>
                        <div>{{youhui}}</div>
                    </div>
                    <div>
                        <h1 class="recharge"><span class="red">*</span>输入充值金额：</h1>
                        <el-input v-model="recharge" placeholder="请输入金额"></el-input>
                    </div>
                    <el-button type="primary" @click="tijiao">提交</el-button>
                </div>
            </div>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import axios from '../../http/http'
    import * as api from '../../http/api'
    export default {
        name: "MemberRecharge",
        data(){
            return{
                activeName:'first',
                MemberId: '',
                recharge: '',
                active: false,
                tishi:true,
                dialogTableVisible :false,
                dialogTableVisibleFail:false,
                memberName:'',
                memberPhone:'',
                memberId: '',
                yue: '',
                youhui: '',
                dqye: '',
            }
        },
        methods:{
            chaxun(){
                if (this.MemberId!='') {
                    this.active=false;
                    console.log(this.MemberId);
                    axios({
                        url: api.selectMember,
                        method:'get',
                        params:{condition:this.MemberId}
                    }).then(res=>{
                        console.log(this.MemberId);
                        console.log(res);
                        if (res.data.code===400) {
                            this.$message.error('查询失败');
                        }else {
                            if (res.data.info.length===0) {
                                this.$message.error('该用户不是会员');
                            }else {
                                this.active=true;
                                this.memberName=res.data.info.name;
                                this.memberPhone=res.data.info.tel;
                                this.memberId=res.data.info.number;
                                this.yue=res.data.info.money;
                                this.youhui=res.data.info.discount;
                                // this.MemberId=''
                            }

                        }
                    }).catch(err=>{
                        console.log(err)
                    })
                }else {
                    this.$message.warning('请输入会员id或手机号码')
                }
            },
            tijiao(){
                if (this.recharge!='') {
                    axios({
                        url:api.chongzhi,
                        method:'get',
                        params:{
                            account: this.MemberId,
                            amount: this.recharge
                        }
                    }).then(res=>{
                        console.log(res)
                        console.log(this.MemberId);
                        console.log(this.recharge);
                        if (res.data.code===400) {
                            this.dialogTableVisibleFail =true
                        }else {
                            this.dqye=res.data.info.money;
                            this.dialogTableVisible=true;
                            this.yue=res.data.info.money;
                            this.recharge=''
                        }
                    }).catch(err=>{
                        console.log(err)
                    })
                }else {
                    this.$message.warning('请输入充值金额')
                }
            },
            queding(){
                this.dialogTableVisible =false
            },
            shibaifanhui(){
                this.dialogTableVisibleFail=false
            }
        }
    }
</script>

<style scoped lang="less">
    .el-input{
        width: 200px;
        margin: 0 20px;
    }
    .red{
        color: red;
    }
    .left{
        display: inline-block;
    }
    .text_left{
        text-align: right;
    }
    .content{
        overflow: hidden;
        h1{
            margin: 30px 0;
        }
        div{
            padding: 10px 0 ;
        }
    }
    .recharge{
        display: inline-block;
    }
</style>